<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .main{
            width: 1600px;

           margin-top: 50px;

          margin-left: 600px;
        }
    </style>

    <script src="/js/websocket.js" type="text/javascript"></script>

    <script src="webjars/jquery/3.5.0/jquery.min.js"></script>
    <script id="code" type="text/javascript">
        var DEBUG_FLAG=true;

        $(function (){
            //启动websocket
            createWebSocket();
        });

        function onWsMessage(evt){
            //当有消息推送后触发下面事件
            var jsonStr=evt.data;
            writeToScreen(jsonStr);
        }

        function writeToScreen(message){
            if(DEBUG_FLAG){
                $("#debuggerInfo").val($("#debuggerInfo").val()+"\n"+message);
            }
        }

        function sendMessageBySocket(){
            var touserId=$("#userId").val();
            var msg=$("#msg").val();

            //键值对中的值是普通对象
            var data1={"fromuserId":userId,"touserId":touserId,"msg":msg};
            var data2={"lxj":222};

            //键值对中的值是 json对象
            var data={"head":data1,"data":data2}

           //  data.push(data1);
           //  data.push(data2)
            console.log(data)
            //转化为json字符串
            wsObj.send(JSON.stringify(data));

        }


    </script>



</head>
<body>

<div class="main">
<textarea  id="debuggerInfo" cols="50" rows="20"  style="color: red;font-size: 20px "></textarea>
<div>用户: <input type="text"  id="userId"> </div>
<div> 消息: <input type="text" id="msg" >  </div>
<div><input type="button" value="发送消息" onclick="sendMessageBySocket()"> </div>
</div>
</body>
</html>